<template>
  <div>

	<myheader></myheader>


	<br><br>

	<Breadcrumb :datas="datas"></Breadcrumb>

	<section class="featured-block text-center">
		<div class="container">
			
		<div>
            <table border="1">
            <tr>
                <th>序号</th>
                <th>活动标题</th>
                <th>活动网址</th>
                <th>活动图片</th>
                <th>
                    操作
                </th>
            </tr>
            <tr v-for="(item, index) in pics_list" :key="index">
                <td>{{index+1}}</td>
                <td>{{item.title}}</td>
                <td>{{item.link}}</td>
                <td><img :src="item.img" width="100px"></td>
                <td>
                    <Button><router-link :to="{path:'/changepics',query:{'id':item.id}}">修改</router-link></Button>
                    <Button @click="remove(item.id)">删除</Button>
                </td>
            </tr>
        </table>
        </div>
		</div>
	</section>
	
	
	<myfooter></myfooter>
	
    
  </div>
  
</template>


 
<script>

//组件包含
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';

export default {
  data () {
    return {
        //面包屑导航
        datas:[{title:'首页',route:{name:'index'}},{title:'活动列表页面'}],
        msg: "这是一个变量",
        pics_list:[]
    }
  },
  //定义组件
  components:{
	'myheader':myheader,
	'myfooter':myfooter
  },
  mounted:function(){
      this.pics()
   
  
},
  methods:{
    pics(){
    this.axios({
        method:'GET',
        url:'http://127.0.0.1:8000/insertpics/',
    }).then(resp=>{
        if (resp.data.code == 200) {
            console.log(resp.data.data)
            this.pics_list=resp.data.data
        }
    })
    },
    remove(id) {
            this.axios({
                method:'DELETE',
                url:'http://127.0.0.1:8000/insertpics/',
                data:{
                    id :id
                }
            }).then(resp=>{
                if (resp.data.code == 200) {
                    alert(resp.data.msg)
                    this.$router.go(0)
                }
            })
        },
  }
}

</script>
 
<style>



</style>